<!-- index.html文件这是为了更好的理解index.js的简化后的内容 -->
import Vue from 'vue'
import Vuex from 'vuex'
// import state from './state'
// import mutations from './mutations'

Vue.use(Vuex)
// 当用户关闭浏览器，使用try跟catch
let yichangCity='北京'
try {
  if ( localStorage.city) {
      yichangCity=localStorage.city
  }
} catch (e) {
    
}
// 导出
export default new Vuex.Store({
    // 存储全局公用的数据
    state: {
        // 公用数据
        // city: '北京1'
        // 为了刷新之后能记住你上回选择的城市，我们加入localStorage，默认先从localStorage中寻找，若是没有则显示你显示的北京。把上面注释
        // city:localStorage.city|| '北京1'
        // 当用户关闭浏览器或者使用隐藏模式的时候，打开浏览器会出现异常，所以我们在上面写一个try，catch,上面的再次注释
        city:yichangCity
    },
    // 改变store使用dispatch的actions
    // 思路：组件调用actions,actions调用mutations,mutations去改变数据
    actions: {
        // 方法，有两个参数，第一个是上下文的参数,他是帮助mutations拿到commit，第二个是传递过来的数据,这是列表.vue的 传过来的city,当然也可以liebiao.vue不使用dispatch，直接看liebiao.vue文件使用
        // changeCity(ctx, city) {
        //     console.log('store' + city)
        //     ctx.commit('changeCity',city)
        // }
    },
     //根据vuex的改变数据结构图,  这个随意取名,也是有两个参数
     mutations:{
        changeCity(state,city){
            state.city=city
            // 这里刷新之后默认显示的是北京。为了能存储起来，使用localStorage存储你选择的城市
            // localStorage.city=city
            // 同样，若是用户关闭的浏览器，代码异常抛出。所以使用try，catch,注释上面的代码
            try {
                localStorage.city=city
            } catch (error) {
                
            }
        }
     }
})